﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Drag/Drag.Move</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Drag-Move">Drag.Move</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#Drag-Move:stop">stop</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:makeDraggable">makeDraggable</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Drag-Move"><a href="#Drag-Move">Class: Drag.Move</a></h1>

<p class="description">An extension to the base Drag class with additional functionality for dragging an Element.  Supports snapping and droppables.
Inherits methods, properties, options and events from <a href="Drag.html#Drag">Drag</a>.</p>

<h3>Demos</h3>

<ul>
<li><a href="http://mootools.net/demos/?demo=Drag.Cart">Drag.Cart</a></li>
<li><a href="http://mootools.net/demos/?demo=Drag.Drop">Drag.Drop</a></li>
<li><a href="http://mootools.net/demos/?demo=Drag.Move">Drag.Move</a></li>
</ul>
<h3>Note</h3>

<p>Drag.Move requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</p>

<h2><a href="#">Drag.Move Method: constructor</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> myMove = <span class="kw2">new</span> Drag.<span class="me1">Move</span><span class="br0">(</span>myElement<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>el      - (<em>element</em>) The Element to apply the drag to.</li>
<li>options - (<em>object</em>, optional) The options object. See below.</li>
</ol>
<h3>Options</h3>

<p>All the base Drag options, plus:</p>

<ul>
<li>container  - (<em>element</em>) If an Element is passed, drag will be limited to the passed Element's size and position.</li>
<li>droppables - (<em>array</em>) The Elements that the draggable can drop into. The class's drop, enter, and leave events will be fired in conjunction with interaction with one of these elements.</li>
<li>precalculate - (<em>boolean</em>; defaults to <em>false</em>) If <em>true</em>, the class will calculate the locations and dimensions of the droppables which will increase performance. If the droppables are likely to change shape, size, or location it is best to leave this as <em>false</em>.</li>
<li>includeMargins - (<em>boolean</em>; defaults to <em>true</em>) This option only applies when the container option is set. If <em>true</em> (the default) the margins are included in the calculations for the bounding box of the draggable item. This means that if you have a margin on your draggable then the border of the draggable can never touch the edge of the container. Setting it to false ignores this margin.</li>
<li>checkDroppables - (<em>boolean</em>; defaults to <em>true</em>) Checks against the droppables on drag if <em>true</em>.</li>
</ul>
<h3>Events</h3>

<ul>
<li>drop  - Executed when the element drops. Passes as argument the element and the element dropped on and the event. If dropped on nothing, the second argument is null.</li>
<li>leave - Executed when the element leaves one of the droppables.</li>
<li>enter - Executed when the element enters one of the droppables.</li>
</ul>
<h3>Example</h3>

<pre class="javascript"><span class="kw2">var</span> myDrag = <span class="kw2">new</span> Drag.<span class="me1">Move</span><span class="br0">(</span><span class="st0">'draggable'</span>, <span class="br0">{</span>
&nbsp;
    droppables: <span class="st0">'.droppable'</span>,
&nbsp;
    onDrop: <span class="kw2">function</span><span class="br0">(</span>element, droppable, event<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">if</span> <span class="br0">(</span>!droppable<span class="br0">)</span> console.<span class="me1">log</span><span class="br0">(</span>element, <span class="st0">' dropped on nothing'</span><span class="br0">)</span>;
        <span class="kw1">else</span> console.<span class="me1">log</span><span class="br0">(</span>element, <span class="st0">'dropped on'</span>, droppable, <span class="st0">'event'</span>, event<span class="br0">)</span>;
    <span class="br0">}</span>,
&nbsp;
    onEnter: <span class="kw2">function</span><span class="br0">(</span>element, droppable<span class="br0">)</span><span class="br0">{</span>
        console.<span class="me1">log</span><span class="br0">(</span>element, <span class="st0">'entered'</span>, droppable<span class="br0">)</span>;
    <span class="br0">}</span>,
&nbsp;
    onLeave: <span class="kw2">function</span><span class="br0">(</span>element, droppable<span class="br0">)</span><span class="br0">{</span>
        console.<span class="me1">log</span><span class="br0">(</span>element, <span class="st0">'left'</span>, droppable<span class="br0">)</span>;
    <span class="br0">}</span>
&nbsp;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes</h3>

<ul>
<li>Drag.Move requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
<li>Drag.Move supports either position absolute or relative. If no position is found, absolute will be set.</li>
</ul>
<h3>See Also</h3>

<ul>
<li><a href="Drag.html#Drag">Drag</a></li>
</ul>
<h2 id="Drag-Move:stop"><a href="#Drag-Move:stop">Drag.Move Method: stop</a></h2>

<p class="description">Fires the 'drop' event and calls the Drag Class stop method.</p>

<h3>Syntax</h3>

<pre class="javascript">myMove.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Example</h3>

<pre class="javascript"><span class="kw2">var</span> myMove = <span class="kw2">new</span> Drag.<span class="me1">Move</span><span class="br0">(</span>myElement, <span class="br0">{</span>
    onSnap: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="co1">// due to MooTool's inheritance, all [Drag][]'s Events are also available.</span>
        <span class="kw1">this</span>.<span class="me1">moved</span> = <span class="kw1">this</span>.<span class="me1">moved</span> || <span class="nu0">0</span>;
        <span class="kw1">this</span>.<span class="me1">moved</span>++;
        <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">moved</span> &gt; <span class="nu0">1000</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"You've gone far enough."</span><span class="br0">)</span>;
            <span class="kw1">this</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>See Also</h3>

<ul>
<li><a href="Drag.html#Drag:stop">Drag:stop</a></li>
</ul>
<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Custom Type to allow all of its methods to be used with any DOM element via the dollar function <a href="../../core/Element/Element.html#dollar">$</a>.</p>

<h2 id="Element:makeDraggable"><a href="#Element:makeDraggable">Element Method: makeDraggable</a></h2>

<p class="description">Adds drag-to-move behavior to an Element using supplied options.</p>

<h3>Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> myDrag = myElement.<span class="me1">makeDraggable</span><span class="br0">(</span><span class="br0">[</span>options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>options - (<em>object</em>, optional) See <a href="Drag.html#Drag">Drag</a> and <a href="#Drag-Move">Drag.Move</a> for acceptable options.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) The Drag.Move instance that was created.</li>
</ul>
<h3>Example</h3>

<pre class="javascript"><span class="kw2">var</span> myDrag = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">makeDraggable</span><span class="br0">(</span><span class="br0">{</span>
    onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'done dragging'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>See Also</h3>

<ul>
<li>
<a href="Drag.html#Drag">Drag</a>, <a href="#Drag-Move">Drag.Move</a>
</li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
